Flexbox
Home

Flexbox

Flexbox

Flexbox of de flexibele box lay-out, is een nieuwe manier om een lay-out met CSS3 te maken en is bedoeld voor het opmaken van complexe applicaties en webpagina's.

Beshrijving

Met Flexbox kan je elementen lay-outen in een container. Je kan ze

M.a.w. je kan die elementen in de container letterlijk flexibel maken, ze kunnen:


Je kan de elementen in een container lay-outen in twee richtingen, de zogenaamde flex richtingen:

  1. horizontaal;
  2. verticaal;

Je bent niet gebonden aan één richting als in andere lay-out technieken. Dit maakt meer adaptieve en responsieve lay-outs mogelijk die zich aanpassen aan de lay-out veranderingen op verschillende schermformaten en oriëntaties.

Tenslotte kan je de visuele volgorde van elementen binnen de container veranderen zonder dat hun werkelijke volgorde in de markup gewijzigd moet worden.

  1. Een flexibele lay-out maken
  2. Flex container eigenschappen
    1. De flex-direction eigenschap
    2. De flex-wrap eigenschap
    3. De flex-flow eigenschap
    4. De justify-content eigenschap
    5. De align-items eigenschap
    6. De align-content eigenschap
  3. Flex item eigenschappen
    1. De order eigenschap
    2. De align-self eigenschap
    3. De flex-grow eigenschap
    4. De flex-shrink eigenschap
    5. De flex-basis eigenschap
    6. De flex eigenschap
  4. Oefeningen

JI
2017-06-11 13:19:27